{include file="public/_header" /}
<style>
    .tool-box{
        /*display: flex;*/

    }
</style>
<div class="layui-body" style="position: relative;left: 30px;top:20px">
<div class="layui-tab layui-tab-brief">
    <div class="layui-tab-item layui-show hunt-4s" style="height: 200px;" >
        <li class="hunt-6" data-type="0">
            <div class="hunt-1">平台总注册用户</div>
            {if empty($start_time)}
            <div class="hunt-2"></div>
            {else/}
            <div class="hunt-2">{$start_time}~{$end_time}</div>
            {/if}
            <div class="hunt-5">{$data.register} </div>
        </li>
        <li class="hunt-6" data-type="1">
            <div class="hunt-1">平台今日新增用户</div>
            {if empty($start_time)}
            <div class="hunt-2"></div>
            {else/}
            <div class="hunt-2">{$start_time}~{$end_time}</div>
            {/if}
            <div class="hunt-5">{$data.userinc}</div>
        </li>
        <li class="hunt-6" data-type="2">
            <div class="hunt-1">今日活跃用户</div>
            {if empty($start_time)}
            <div class="hunt-2"></div>
            {else}
            <div class="hunt-2">{$start_time}~{$end_time}</div>
            {/if}
            <div class="hunt-5">{$data.active}</div>
        </li>
        <li class="hunt-6" data-type="3">
            <div class="hunt-1">今日新增广告数量</div>
            {if empty($start_time)}
            <div class="hunt-2"></div>
            {else}
            <div class="hunt-2">{$start_time}~{$end_time}</div>
            {/if}
            <div class="hunt-5">{$data.adsinc}</div>
        </li>
        <li class="hunt-6" data-type="4">
            <div class="hunt-1">今日广告转发次数</div>
            {if empty($start_time)}
            <div class="hunt-2"></div>
            {else}
            <div class="hunt-2">{$start_time}~{$end_time}</div>
            {/if}
            <div class="hunt-5">{$data.share}</div>
        </li>
        <li class="hunt-6" data-type="5">
            <div class="hunt-1"></div>

            <div class="hunt-2"></div>

            <div class="hunt-5" style="font-size: medium;color: red">广告地域投放</div>
        </li>
    </div>
    <div class="layui-tab-content" >


        <div class="tool-box">
            <div class="left">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">日期范围</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="time" id="test6" placeholder=" - ">
                            </div>
                            <div class="layui-input-inline">
                                <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                            </div>
                        </div>
                    </div>

                </div>
                <span class=" show-left">
                     <div class="layui-tab-item layui-show" style="width: 700px;height: 500px; float: left;" id="line" id-data></div>
                </span>

                <div class="layui-tab-item layui-show" style="float: left; margin-left: 10%">
                    <div class="ad-box">
                        <ul class="row-hunt" id="ad">

                        </ul>
                        <ul class="row-hunt" id="audio">

                        </ul>
                    </div>
                    <div class="chart-con" >
                        <div style="width: 500px;height: 300px" id="ad-box">

                        </div>
                        <div style="width: 500px;height: 300px" id="me-box">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    $(function () {
        changeTab();
        activeBox();
        var Type = ["register","useinc","active","advinc","share"];
        var Title = ["用户量","新增用户量","活跃用户量","新增广告数量","广告转发数量"];
        initLine("","",Type[0],Title[0]);
        //var typeStatus = "register";
        function activeBox(){

            $('.hunt-6').click(function () {
                var type = $(this).attr('data-type');
                var Type = ["register","useinc","active","advinc","share"];
                var Title = ["用户量","新增用户量","活跃用户量","新增广告数量","广告转发数量"];
                initLine("","",Type[type],Title[type]);
                typeStatus = Type[type];
                changeTab(type)
            })
        }
        layui.use(['form','laydate'], function() {
            var laydate = layui.laydate;
            var form = layui.form;
            //日期范围
            laydate.render({
                elem: '#test6'
                , range: true,
                format: 'yyyy/MM/dd'
            });

            //监听提交
            form.on('submit(demo1)', function(data){
                var data = data.field;

//                layer.alert(JSON.stringify(data.field), {
//                    title: '最终的提交信息'
//                })
                var start = data.time.split("-")[0]
                var end = data.time.split("-")[1];
                console.log(start.replace(/\//g,"-"),end.replace(/\//g,"-"));
                initLine(start.replace(/\//g,"-"),end.replace(/\//g,"-"),typeStatus);
            });

        })


        function changeTab(val) {
            //平台总注册用户   平台今日新增用户  今日活跃用户  今日新增广告数量  今日广告转发次数
            var url  = ['api/index/ad_register','api/index/ad_userincrement','api/index/ad_active','api/index/ad_adsincrement','api/index/ad_share','api/index/ad_puton']
            let baseUrl = "<?php  echo "http://".$_SERVER['HTTP_HOST'].'/'; ?>";
            doAjax({
                url:baseUrl+url[val || 0],
                success:function (res) {
                    if(val != 5){
                        initBox(val || 0,res.data);
                        $('.ad-box').show();
                        $('.layui-form').show();
                        $('.show-left').show();
                        $('.chart-con').hide();
                        $('.left').show();
                    }else{
                        initCircular(res.data);
                        $('.ad-box').hide();
                        $('.show-left').hide();
                        $('.layui-form').hide();
                        $('.chart-con').show();
                        $('.left').show();
                    }

                }
            })

        }

        function initBox(val,res) {
            var boxList = {
                0:{adv:{name:"广告主数量",value:"",type:"1"},media:{name:"自媒体数量",value:"",type:"2"},validadv:{name:"有效广告主数量",value:"",type:"1"},valimedia:{name:"有效自媒体数量",value:"",type:"2"}},
                1:{newadv_day:{name:"今日新增广告主",value:"",type:"1"},newadv_week:{name:"今日新增自媒体",value:"",type:"2"},newadv_mon:{name:"本周新增",value:"",type:"1"},newmedia_day:{name:"本周新增",value:"",type:"2"},newmedia_week:{name:"本月新增",value:"",type:"1"},newmedia_mon:{name:"本月新增",value:"",type:"2"}},
                2:{active_week:{name:"本周活跃用户",value:"",type:"1"},active_mon:{name:"本月活跃用户",value:"",type:"2"}},
                3:{newads_week:{name:"本周新增广告数量",value:"",type:"1"},newads_mon:{name:"本月新增广告数量",value:"",type:"2"},newads_sum:{name:"总广告发布数量",value:"",type:"1"},newads_valid:{name:"在线广告数量",value:"",type:"2"}},
                4:{share_week:{name:"本周转发次数",value:"",type:"1"},share_mon:{name:"本月转发次数",value:"",type:"2"},share_sum:{name:"总转发次数",value:"",type:"1"},click_valid:{name:"有效点击数",value:"",type:"2"}}
            }

            var data = [];
            for(var i in boxList[val]){
                for(var j in res){
                    if(i == j){
                        boxList[val][i].value = res[j];
                    }
                }

            }
            var ad = "";
            var audio = "";
            for(var i in boxList[val]){
                if(boxList[val][i].type == 1){
                    ad += '<li class="hunt"><div class="hunt-1">'+boxList[val][i].name+'</div><div class="hunt-3">'+boxList[val][i].value+'</div> </li>';
                }else{
                    audio += '<li class="hunt"><div class="hunt-1">'+boxList[val][i].name+'</div><div class="hunt-3">'+boxList[val][i].value+'</div> </li>';
                }
//                data.push(boxList[val][i]);
            }
            $('#ad').html(ad);
            $('#audio').html(audio);

        }

        function doAjax(option) {
            $.ajax({
                url:option.url,
                methods:"post",
                success:function (res) {
                    if(typeof option.success == 'function'){
                        option.success(res);
                    }
                }
            })
        }

        function initCircular(data){
            console.log(data)
            var option = getDate(data,"ad-box",'adv_cent',"广告主使用地区占比");
            var option1 = getDate(data,"me-box",'media_cent',"自媒体使用地区占比");
            getCircular(option);
            getCircular(option1)
        }
        function getDate(data,el,key,title) {
            var xData = [];
            var yData = [];
            for(var i in data[key]){
                xData.push(data[key][i]['province']);
                yData.push({name:data[key][i]['province'],value:data[key][i]['count']});
            }
            return {
                title:title || "",
                xDate:xData,
                yDate:yData,
                el:el
            }
        }
        function getCircular(params){
            var option = {
                title : {
                    text: params.title,
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: params.xDate
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:params.yDate,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };


            var echartsPie = echarts.init(document.getElementById(params.el));
            echartsPie.setOption(option);
        }

        function  initLine(end_time,ends_time,data_type,data_title) {
            //平台总注册用户   平台今日新增用户  今日活跃用户  今日新增广告数量  今日广告转发次数
            let baseUrl = "<?php  echo "http://".$_SERVER['HTTP_HOST'].'/'; ?>";
            $.ajax({
                url:baseUrl + 'api/index/graph_search',
                methods:"post",
                data:{
                    start_time:end_time,
                    end_time:ends_time,
                    data_type:data_type
                },
                success:function (res) {
                    console.log(res);
                    drowLine({
                        title:data_title,
                        lineTitle:res.data.chinese,
                        Xdata:res.data.all_month,
                        Sdata:res.data.all_data
                    });
                }
            })
        }

        function  drowLine(data) {
            option = {
                title: {
                    text: data.title
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:data.lineTitle || ['邮件营销']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:  data.Xdata || []
                },
                yAxis: {
                    type: 'value'
                },
                series: data.Sdata || []
            };
            var echartsPie = echarts.init(document.getElementById("line"));
            echartsPie.setOption(option);

        }
    })
</script>

</html>